<template>
  <div class="boxs">
    <div class="f1">
      <ul>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组172.png" alt="" />
            <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
          </div>
          <span style="color: #627dca">确认账款信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组173.png" alt="" />
            <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
          </div>
          <span>上传申请材料</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组177.png" alt="" />
          </div>
          <span>绑定银行账户</span>
        </li>
      </ul>
    </div>
    <div class="f2" v-loading="loading">
      <h1>账款信息</h1>
      <!-- 表格 -->
      <el-table
        ref="tableInfo"
        @select="selectRow"
        @select-all="selectAll"
        :data="tableData"
        border
        highlight-current-row
        stripe
        type="index"
        style="width: 100%"
        :header-cell-style="{
          background: '#F1F5FF',
          color: '#4D4D4D',
        }"
      >
        <el-table-column type="selection" min-width="6%" align="center">
        </el-table-column>
        <el-table-column prop="" label="序号" min-width="4%" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column
          prop="sealentname"
          label="企业名称"
          min-width="12%"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="payamount"
          label="应收账款金额（元）"
          min-width="8%"
          align="center"
        >
          <template slot-scope="scope">{{
            scope.row.payamount | getArea
          }}</template>
        </el-table-column>
        <el-table-column
          prop="paybegindate"
          label="应收账款生成日期"
          min-width="8%"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="payenddate"
          label="应收账款到期日"
          min-width="8%"
          align="center"
        >
        </el-table-column>
        <el-table-column label="详情" min-width="6%" align="center">
          <template slot-scope="scope">
            <span
              class="span1"
              type="text"
              size="small"
              @click="examine(scope.$index, tableData)"
            >
              查看
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 下一步按钮 -->
    <div class="submit">
      <div class="btn btn1" @click="goLastFlow()">上一步</div>
      <button :disabled="isLock" class="btn" @click="goNextFlow()">
        下一步
      </button>
    </div>
  </div>
</template>

<script>
import { myPostFetch } from "@/utils";
export default {
  data() {
    return {
      loading: false,
      isLock: false,
      ids: "",
      tableData: null,
      coopid: "",
      procedureId: "",
      productcode: "",
      productname: "",
    };
  },
  // 计算属性
  computed: {},
  // 生命周期函数
  mounted() {
    // 从路由地址中获取产品ID, 保存到状态变量中;
    this.procedureId = localStorage.getItem("id");
    this.productcode = localStorage.getItem("productcode");
    this.productname = localStorage.getItem("productname");
    this.coopid = localStorage.getItem("coopid");

    // 获取账款列表
    this.tableData = JSON.parse(localStorage.getItem("list"));
  },
  // 过滤器
  filters: {
    getArea: function (value) {
      value = parseFloat(value);
      if (!value) return "0.00";
      // 将数值截取，保留两位小数
      value = value.toFixed(2);
      // 获取整数部分
      const intPart = Math.trunc(value);
      // 整数部分处理，增加,
      const intPartFormat = intPart
        .toString()
        .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
      // 预定义小数部分
      let floatPart = ".00";
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split(".");
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString(); // 取得小数部分
        return intPartFormat + "." + floatPart;
      }
      return intPartFormat + floatPart;
    },
  },
  methods: {
    examine(index, row) {
      let imgUrlStr = row[index].filepath;
      const a = document.createElement("a"); // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
      a.setAttribute("target", "_blank");
      a.href = imgUrlStr;
      a.click();

      // else {
      //   fetch(imgUrlStr).then((res) =>
      //     res.blob().then((blob) => {
      //       const a = document.createElement("a"), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
      //         url = window.URL.createObjectURL(blob),
      //         filename = oldfilename;
      //       a.href = url;
      //       a.download = filename;
      //       a.click();
      //       window.URL.revokeObjectURL(url);
      //     })
      //   );
      // }
    },
    // 点击下一步,产品申请二绑定
    async goNextFlow() {
      this.isLock = true;
      setTimeout(() => {
        this.isLock = false;
      }, 3000);
      if (this.ids != "") {
        this.loading = true;
        let url = "/api/pros/productsubsaccadd";
        let params = {
          coopid: this.coopid,
          ids: this.ids,
          productcode: this.productcode,
          productid: this.procedureId,
          productname: this.productname,
        };
        let data = await myPostFetch(url, params);
        if (data.code != 100) return;
        localStorage.setItem("applyid", data.data.id);
        this.$router.push(`/blrzApplication3`);
        this.loading = false;
      } else {
        this.$Message.warning("请选择账款信息");
        this.loading = false;
        return;
      }
    },
    // 点击上一步
    goLastFlow() {
      this.$router.go(-1);
    },
    selectRow(selection, row) {
      let list = [];
      if (selection.length == 0) return (this.ids = "");
      // 选择项大于1时
      if (selection.length > 1) {
        let del_row = selection.shift();
        this.$refs.tableInfo.toggleRowSelection(del_row, false);
        this.ids = selection[0].id;
        return;
      }
      this.ids = selection[0].id;
    },
    selectAll(selection) {
      // 选择项大于1时
      if (selection.length > 1) {
        selection.length = 1;
        this.ids = selection[0].id;
      } else {
        this.ids = selection[0].id;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.boxs {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  .f1 {
    margin-top: 0.1042rem;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 0.2083rem;
        .icon {
          .icon1 {
            width: 0.2083rem;
          }
          .icon2 {
            height: 0.0104rem;
            margin: 0 0.0833rem;
          }
        }
        span {
          font-size: 0.1042rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999;
          margin-left: -0.1979rem;
          margin-top: 0.0156rem;
        }
      }
    }
  }
  .f2 {
    box-sizing: border-box;
    padding: 0.0781rem;
    width: 100%;
    margin-top: 0.1979rem;
    overflow: auto;
    .span1 {
      display: inline-block;
      font-size: 0.0781rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      margin-right: 0.026rem;
      color: #3f6ef2;
      border-bottom: 0.0052rem solid #3f6ef2;
      cursor: pointer;
    }
    h1 {
      font-size: 0.0938rem;
      margin-bottom: 0.1042rem;
    }
  }
  .f2::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #fff;
  }

  .f2::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(36, 143, 172, 0.5);
  }
  // 按钮
  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 0.2083rem;
    margin-top: 0.2604rem;
    margin-bottom: 0.0781rem;
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 0.9375rem;
      height: 0.1979rem;
      background: linear-gradient(-90deg, #5d98f8, #4b5af8);
      box-shadow: 0px 0.0313rem 0.1042rem 0px rgba(0, 40, 193, 0.5);
      border-radius: 0.0208rem;
      font-size: 0.0938rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      margin-right: 0.1563rem;
      color: #ffffff;
      cursor: pointer;
    }
    .btn1 {
      box-shadow: 0px 0 0 0px rgba(0, 40, 193, 0.5);
      background: #b6c9ff;
    }
  }
}
</style>
<style lang="scss">
/* 表格 */
.el-table {
  th.el-table__cell > .cell {
    font-size: 16px;
    font-weight: 400;
  }
  .cell {
    font-size: 16px;
  }
}
</style>
